<template>
    <div class="loginBox" v-if="loginBox">
        <div class="left">
            <van-icon @click="loginBox = false" name="close" />登录抢购商品
        </div>
        <div class="right" @click="onLogin"><button>立即登录</button></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 登录状态
const loginBox = ref<Boolean>(true)
// 跳转登录按钮
const onLogin = () => {
    router.push('/login')
}
// 登录状态验证
const isLogin = () => {
    // token 验证登录提示状态
    let token = localStorage.getItem('TOKEN')
    if(token) loginBox.value = false 
    else loginBox.value = true
}
onMounted(() => {
    isLogin()
})
</script>

<style lang="scss" scoped>
    .loginBox {
        position: fixed;
        bottom: 60px;
        width: 90%;
        margin: 0 10px 0 10px;
        padding: 10px 10px 10px 10px;
        color: white;
        background-color: rgba($color: #000000, $alpha: 0.8);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 20x;
        .left {
            font-size: 16px;
        }
        .right{
            display: flex;
            align-items: center;
            button {
                // position: relative;
                // top: -10px;
                width: 80px;
                font-size: 10px;
                line-height: 10px;
                height: 20px;
                border: none;
                // height: 100%;
                background-color: #ff3d40;
                border-radius: 10px;
            }
        }
    }
</style>
